<?php
$gridWidth  = !empty($_REQUEST['gw']) ? (int)$_REQUEST['gw'] : 40;
$gridMargin = !empty($_REQUEST['gm']) ? (int)$_REQUEST['gm'] : 8;
$gridNumber = !empty($_REQUEST['gn']) ? (int)$_REQUEST['gn'] : 24;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>栅格化布局样式表生成工具</title>
<style type="text/css">
<?php ob_start();?>
/** 
 * 这里的栅格化布局样式针对宽度排版，不栅格化高。
 * 如要栅格化高，那可是简单多了，稍微加上就行了。 
 */
/* 栅格化布局样式 */
.wrap { width: <?=$gridNumber*$gridWidth-$gridMargin?>px;margin: 0 auto; position:relative; }
.grid { margin-right:<?=$gridMargin?>px; float: left; display: inline-block;}
.grid.grid-fixed {margin-right:0;}
<?php for($i=1; $i <= $gridNumber; $i++) {?>
.grid-<?=$i?> { width:<?=$i*$gridWidth-$gridMargin?>px; }
<?php }?>
/* End 栅格化布局样式 */
<?php $gridCss = ob_get_flush();?>

* { margin:0; padding:0; font-size:12px; line-height:1.5; font-family:arial,'宋体',sans-serif;}
.row { height:92px; position:relative; z-index:8;}
.grid { background:#E07000; height:92px; position:relative; }
.grid.r { background:#B6D07C;}
.grid .txt { position:absolute; left:2px; top:36px;}
.bg { height:100%; position:fixed; width:100%;}
.bg .grid{ height:100%; background:#B6D07C; z-index:1;}
.sp { float:left; background:#FFF; height:<?=$gridMargin?>px; line-height:<?=$gridMargin?>px; overflow:hidden; width:100%; clear:both;}
#setting {position:absolute; width:100%; top:0; height:320px; z-index:999;color:#006699; }
#setting h3 {  font-size:14px; text-align:center; margin-bottom:8px;}
#setting p { margin-bottom:4px; color:#999;}
#setting input {color:#19A923; border:1px solid #83AF00; height:18px; line-height:18px; }
#setting input.btn { padding:0 3px; height:auto; cursor:pointer;}
#setting textarea { width:100%; height:132px; margin-top:8px; color:#81AC00; border:1px solid #DDD;}
</style>
</head>

<body>
<div class="wrap">
  <!-- Demo 背景-->
  <div class="bg">
    <?php for($i=1; $i <= $gridNumber-1; $i++) {?>
    <div class="grid-1 grid"></div>
    <?php }?>
    <div class="grid-1 grid grid-fixed"></div>
    <div class="sp"></div>
  </div>
  <!-- End Demo 背景-->
  <?php for($i=1; $i < $gridNumber; $i++) {?>
  <div class="row">
    <div class="grid-<?=$i?> grid grid-item"><span class="txt"><?=$i*$gridWidth-$gridMargin?>px</span></div>
    <?php for($j=1; $j < $gridNumber-$i; $j++) {?>
    <div class="grid-1 grid grid-item r"></div>
    <?php }?>
    <div class="grid-1 grid grid-item r grid-fixed"></div>
    <div class="sp"></div>
  </div>
<?php }?>
  <div class="row">
    <div class="grid-<?=$gridNumber?> grid grid-item grid-fixed"><span class="txt"><?=$gridNumber*$gridWidth-$gridMargin?>px</span></div>
    <div class="sp"></div>
  </div>

  <div id="setting">
    <div style="width:360px; height:234px; padding:8px 8px 0 ; background:#FFF; border:8px solid #19A923; margin: 20px auto 0; ">
      <h3>栅格化布局样式表生成工具设置</h3>
      <form method="post" target="_self">
          <p>栅格个数：<input type="text" name="gn" size="6" value="<?=$gridNumber?>" /> 
          个 &nbsp; &nbsp;栅格宽度：
          <input name="gw" type="text" id="gw" value="<?=$gridWidth?>" size="6" /> 
          px</p>
          <p>栅格间距：<input name="gm" type="text" id="gm" value="<?=$gridMargin?>" size="6" /> 
          px  &nbsp;&nbsp; 
          <input name="button" type="submit" class="btn" id="button" value="提交" />
              <input name="button2" type="reset" class="btn" id="button2" value="重置" />
          </p>
          <div><textarea cols="30" rows="5" ><?=$gridCss?></textarea></div>
      </form>
    </div>
  </div>

</div>

</body>
</html>
